
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=""> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>{cms:config name="cms.title|htmlentities"/} - {cms:config name="cms.sitename"/}</title>
    <meta name="keywords" content="{cms:config name='cms.keywords|htmlentities'/}"/>
    <meta name="description" content="{cms:config name='cms.description|htmlentities'/}"/>

    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" media="screen" href="__CDN__/assets/css/bootstrap.min.css?v={$site.version}"/>
    <link rel="stylesheet" media="screen" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css?v={$site.version}"/>
    <link rel="stylesheet" media="screen" href="__ADDON__/css/swiper.min.css?v={$site.version}">
    <link rel="stylesheet" media="screen" href="__ADDON__/css/share.min.css?v={$site.version}">
    <link rel="stylesheet" media="screen" href="__ADDON__/css/iconfont.css?v={$site.version}">
    <link rel="stylesheet" media="screen" href="__ADDON__/css/common.css?v={$site.version}"/>

    <!--分享-->
    <meta property="og:title" content="{cms:config name='cms.title|htmlentities'/}"/>
    <meta property="og:image" content="{cms:config name='cms.image|htmlentities'/}"/>
    <meta property="og:description" content="{cms:config name='cms.description|htmlentities'/}"/>

    {__STYLE__}

    <!--[if lt IE 9]>
    <script src="__CDN__/libs/html5shiv.js"></script>
    <script src="__CDN__/libs/respond.min.js"></script>
    <![endif]-->

    {cms:block name="header" field="content" /}
</head>
<body class="group-page skin-white">

<header class="header">
    <!-- S 导航 -->
    <nav class="navbar navbar-default navbar-white navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle sidebar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{cms:config name='cms.indexurl'/}"><img src="{$Think.config.cms.sitelogo|default='/assets/addons/cms/img/logo.png'|cdnurl}" style="height:100%;" alt=""></a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav" data-current="{$__CHANNEL__.id|default=0}">
                    <!--如果你需要自定义NAV,可使用channellist标签来完成,这里只设置了2级,如果显示无限级,请使用cms:nav标签-->
                    {cms:channellist id="nav" type="top" condition="1=isnav"}
                    <!--判断是否有子级或高亮当前栏目-->
                    <li class="{if $nav.has_child}dropdown{/if} {if $nav->is_active} active{/if}">
                        <a href="{$nav.url}" {if $nav.has_child} data-toggle="dropdown" {/if}>{$nav.name|htmlentities}{if $nav.has_nav_child} <b class="caret"></b>{/if}</a>
                        <ul class="dropdown-menu {if !$nav.has_nav_child}hidden{/if}" role="menu">
                            {cms:channellist id="sub" type="son" typeid="nav['id']" condition="1=isnav"}
                            <li><a href="{$sub.url}">{$sub.name|htmlentities}</a></li>
                            {/cms:channellist}
                        </ul>
                    </li>
                    {/cms:channellist}

                    <!--如果需要无限级请使用cms:nav标签-->
                    {//cms:nav maxlevel="4" cache="86400" /}
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <form class="form-inline navbar-form" action="{:addon_url('cms/search/index')}" method="get">
                            <div class="form-search hidden-sm">
                                <input class="form-control" name="q" data-suggestion-url="{:addon_url('cms/search/suggestion')}" type="search" id="searchinput" value="{$Think.request.q|default=''|htmlentities}" placeholder="搜索">
                                <div class="search-icon"></div>
                            </div>
                            {:token('__searchtoken__')}
                        </form>
                    </li>
                    {if config('fastadmin.usercenter')}
                    <li class="dropdown navbar-userinfo">
                        {if $user}
                        <a href="{:url('index/user/index')}" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="avatar-img pull-left"><img src="{$user.avatar|cdnurl|htmlentities}" style="width:27px;height:27px;border-radius:50%;" alt=""></span>
                            <span class="visible-xs pull-left ml-2 pt-1">{$user.nickname|htmlentities} <b class="caret"></b></span>
                        </a>
                        {else /}
                        <a href="{:url('index/user/index')}" class="dropdown-toggle" data-toggle="dropdown">会员<span class="hidden-sm">中心</span> <b class="caret"></b></a>
                        {/if}
                        <ul class="dropdown-menu">
                            {if $user}
                            <li><a href="{:url('index/user/index')}"><i class="fa fa-user fa-fw"></i> 会员中心</a></li>
                            <li><a href="{:addon_url('cms/user/index', [':id'=>$user['id']])}"><i class="fa fa-user-circle fa-fw"></i> 我的个人主页</a></li>
                            {php}$sidenav = array_filter(explode(',', config('cms.usersidenav')));{/php}
                            {if in_array('myarchives', $sidenav)}
                            <li><a href="{:url('index/cms.archives/my')}"><i class="fa fa-list fa-fw"></i> 我发布的文档</a></li>
                            {/if}
                            {if in_array('postarchives', $sidenav)}
                            <li><a href="{:url('index/cms.archives/post')}"><i class="fa fa-pencil fa-fw"></i> 发布文档</a></li>
                            {/if}
                            {if in_array('myorder', $sidenav)}
                            <li><a href="{:url('index/cms.order/index')}"><i class="fa fa-shopping-bag fa-fw"></i> 我的消费订单</a></li>
                            {/if}
                            {if in_array('mycomment', $sidenav)}
                            <li><a href="{:url('index/cms.comment/index')}"><i class="fa fa-comments fa-fw"></i> 我发表的评论</a></li>
                            {/if}
                            {if in_array('mycollection', $sidenav)}
                            <li><a href="{:url('index/cms.collection/index')}"><i class="fa fa-bookmark fa-fw"></i> 我的收藏</a></li>
                            {/if}
                            <li><a href="{:url('index/user/logout')}"><i class="fa fa-sign-out fa-fw"></i> 退出</a></li>
                            {else /}
                            <li><a href="{:url('index/user/login')}"><i class="fa fa-sign-in fa-fw"></i> 登录</a></li>
                            <li><a href="{:url('index/user/register')}"><i class="fa fa-user-o fa-fw"></i> 注册</a></li>
                            {/if}
                        </ul>
                    </li>
                    {/if}
                </ul>
            </div>

        </div>
    </nav>
    <!-- E 导航 -->

</header>

<main class="main-content">
    <div class="container" id="content-container">

        <div class="row">
            <aside class="col-xs-12 col-md-4 mululist">
            </aside>
            <main class="col-xs-12 col-md-8">
                <div class="panel panel-default article-content">
                    <div class="panel-heading">
                        <ol class="breadcrumb">
                            <!-- S 面包屑导航 -->
                            {cms:breadcrumb id="item"}
                            <li><a href="{$item.url}">{$item.name|htmlentities}</a></li>
                            {/cms:breadcrumb}
                            <!-- E 面包屑导航 -->
                        </ol>
                    </div>
                    <div class="panel-body">
                        <div class="article-metas">
                            <h1 class="metas-title" {if $__ARCHIVES__.style}style="{$__ARCHIVES__.style_text}"{/if}>
                                {cms:archives name="title|htmlentities" /}
                            </h1>
                            <!-- S 标题区域 -->
                            <div class="metas-body">
                                <span class="views-num">
                                    <i class="fa fa-eye"></i> {cms:archives name="views" /} 阅读
                                </span>
                                <span class="comment-num">
                                    <i class="fa fa-comments"></i> {cms:archives name="comments" /} 评论
                                </span>
                                <span class="like-num">
                                    <i class="fa fa-thumbs-o-up"></i>
                                    <span class="js-like-num"> {cms:archives name="likes" /} 点赞
                                    </span>
                                </span>
                            </div>
                            <!-- E 标题区域 -->
                        </div>
    
                        <div class="article-text">
                            <!-- S 正文 -->
                            <p>
                                
                            </p>
                            <!-- E 正文 -->
                        </div>
    
                        {include file="common/payment" /}
    
                        {include file="common/donate" /}
    
                        {include file="common/share" type="archives" image="__ARCHIVES__.image" aid="__ARCHIVES__.id"}
    
                        {include file="common/metainfo" /}
    
                        {include file="common/related" /}
    
                        <div class="clearfix"></div>
                    </div>
                </div>
    
                {if $config.iscomment && config('fastadmin.usercenter')}
                <div class="panel panel-default" id="comments">
                    <div class="panel-heading">
                        <h3 class="panel-title">{:__('Comment list')}
                            <small>共有 <span>{cms:archives name="comments" /}</span> 条评论</small>
                        </h3>
                    </div>
                    <div class="panel-body">
                        {if $__ARCHIVES__.iscomment}
                        {include file="common/comment" type="archives" aid="__ARCHIVES__.id"}
                        {else/}
                        <div class="text-muted text-center">评论功能已关闭</div>
                        {/if}
                    </div>
                </div>
                {/if}
    
            </main>
        </div>
    </div>
</main>

<footer>
    <div id="footer">
        <div class="container">
            <div class="row footer-inner">
                <div class="col-xs-12">
                    <div class="footer-logo pull-left mr-4">
                        <a href="{:addon_url('cms/index/index')}"><i class="fa fa-bookmark"></i></a>
                    </div>
                    <div class="pull-left">
                        Copyright&nbsp;©&nbsp;{:date("Y")} All rights reserved. {cms:config name="cms.sitename"/}
                        <a href="https://beian.miit.gov.cn" target="_blank">{$site.beian|htmlentities}</a>

                    <ul class="list-unstyled list-inline mt-2">
                        <li><a href="{:addon_url('cms/page/index', [':diyname'=>'aboutus'])}">关于我们</a></li>
                        <li><a href="{:addon_url('cms/page/index', [':diyname'=>'agreement'])}">用户协议</a></li>
                        {if config('fastadmin.usercenter')}
                        <li><a href="{:url('index/user/index')}">会员中心</a></li>
                        {/if}
                    </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</footer>

<div id="floatbtn">
    <!-- S 浮动按钮 -->

    {if isset($config.wxapp)&&$config.wxapp}
    <a href="javascript:;">
        <i class="iconfont icon-wxapp"></i>
        <div class="floatbtn-wrapper">
            <div class="qrcode"><img src="{$config.wxapp|cdnurl|htmlentities}"></div>
            <p>微信小程序</p>
            <p>微信扫一扫体验</p>
        </div>
    </a>
    {/if}

    {if in_array('postarchives', explode(',', config('cms.usersidenav'))) && config('fastadmin.usercenter')}
    <a class="hover" href="{:url('index/cms.archives/post')}" target="_blank">
        <i class="iconfont icon-pencil"></i>
        <em>立即<br>投稿</em>
    </a>
    {/if}

    <div class="floatbtn-item floatbtn-share">
        <i class="iconfont icon-share"></i>
        <div class="floatbtn-wrapper" style="height:50px;top:0">
            <div class="social-share" data-initialized="true" data-mode="prepend">
                <a href="#" class="social-share-icon icon-weibo" target="_blank"></a>
                <a href="#" class="social-share-icon icon-qq" target="_blank"></a>
                <a href="#" class="social-share-icon icon-qzone" target="_blank"></a>
                <a href="#" class="social-share-icon icon-wechat"></a>
            </div>
        </div>
    </div>

    {if $config.qrcode}
    <a href="javascript:;">
        <i class="iconfont icon-qrcode"></i>
        <div class="floatbtn-wrapper">
            <div class="qrcode"><img src="{$config.qrcode|cdnurl|htmlentities}"></div>
            <p>微信公众账号</p>
            <p>微信扫一扫加关注</p>
        </div>
    </a>
    {/if}

    {if isset($__ARCHIVES__)}
    <a id="feedback" class="hover" href="#comments">
        <i class="iconfont icon-feedback"></i>
        <em>发表<br>评论</em>
    </a>
    {/if}

    <a id="back-to-top" class="hover" href="javascript:;">
        <i class="iconfont icon-backtotop"></i>
        <em>返回<br>顶部</em>
    </a>
    <!-- E 浮动按钮 -->
</div>
<style>
    .mulu {
        font-size: 20px;
        /* background-color: beige; */
    }
    .mululist {
        height: 90vh;
        overflow: auto;
    }
    .article-text p {
        height: 70vh;
        overflow: auto;
    }

    .active {  
        background-color: red; /* 或其他你喜欢的颜色 */  
    }
</style>
<script type="text/javascript" src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js?v={$site.version}"></script>
<script type="text/javascript" src="__CDN__/assets/libs/art-template/dist/template-native.js?v={$site.version}"></script>
<script type="text/javascript" src="__ADDON__/js/jquery.autocomplete.js?v={$site.version}"></script>
<script type="text/javascript" src="__ADDON__/js/swiper.min.js?v={$site.version}"></script>
<script type="text/javascript" src="__ADDON__/js/share.min.js?v={$site.version}"></script>
<script type="text/javascript" src="__ADDON__/js/cms.js?v={$site.version}"></script>
<script type="text/javascript" src="__CDN__/assets/libs/jquery/dist/jquery.min.js?v={$site.version}"></script>
{if $isWechat}
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
{/if}

<script>

    const filepath = "{cms:archives name='xsfile' /}";
    // 获取网址
    const baseUrl = window.location.protocol + "//" + window.location.host;
    console.log("当前浏览器基本网址是: " + baseUrl);
    // 文章标题
    let allchapter = null;
    // 当前标题
    let nowchapter = null;

    $(document).ready(function() {  
        getAllChapter();
    });

    $('.mulu').click(function() {
        // 获取被点击元素的文本内容
        var title = $(this).text();
        
        // 将内容传递给 getChapterContent 函数
        getChapterContent(title);
    });

    function getAllChapter(){
        let postData = { filepath: filepath}
        $.ajax({  
            url: baseUrl + '/api/Novel/getAllChapter',  
            type: "POST",
            data: postData, 
            success: function(res) {  
                console.log(res); // 在这里处理你的数据  
                allchapter = res.data;
                // 清除之前可能存在的所有高亮  
                $('.mulu').removeClass('active');
                // 遍历 res.data 并将每个章节的标题作为 div 插入 .mululist 中
                res.data.forEach(function(chapter) {
                    // 创建一个 div 元素并设置内容
                    var div = $('<div class = "mulu"></div>').text(chapter.title);
                    // 将 div 插入到 .mululist 中
                    $('.mululist').append(div);
                    // 为每个 div 绑定点击事件  
                    div.click(function() {  
                        // 移除其他 div 的高亮  
                        $('.mulu').not(this).removeClass('active');  
                        // 给当前 div 添加高亮  
                        $(this).addClass('active');  
                        // 获取被点击元素的文本内容并调用函数  
                        var title = $(this).text();  
                        getChapterContent(title);  
                    });  
                });
                $('.mulu').click(function() {
                    // 获取被点击元素的文本内容
                    var title = $(this).text();
                    
                    // 调用函数处理点击事件
                    getChapterContent(title);
                });
            },  
            error: function(xhr, status, error) {  
                console.error("获取章节失败: ", error);  
            }  
        }); 
    };

    function getChapterContent(title){
        let postData = { filepath: filepath,chapterTitle: title}
        $.ajax({  
            url: baseUrl + '/api/Novel/getChapterContent',  
            type: "POST",
            data: postData, 
            success: function(res) {  
                console.log(res); 
                $('.article-text p').html(res.data.replace(/\r\n|\n/g, '<br>&nbsp&nbsp&nbsp&nbsp'));
            },  
            error: function(xhr, status, error) {  
                console.error("获取章节失败: ", error);  
            }  
        }); 
    };
</script>
{__SCRIPT__}

{cms:block name="footer" field="content" /}
</body>
</html>



